GASの開発環境をローカルで作成する方法（2023年7月版）
ことのはじまり
私は最近Google Apps Script(GAS)の学習を始めました。 GASの学習を始めると、まずはAppsScript公式のIDEでスクリプトを書いていくことになると思います。 しかし、普段VSCodeを使い慣れている身からすると、VSCodeの便利機能が使いたくて仕方なくなります。
それじゃあ、使い慣れたVSCodeを使おうじゃないか！！ AppsScript公式のIDEだとGitに差分を残していくこともできないぞ！！（できます）
というわけで、GASをVSCodeを使って開発する為の環境構築の手順を書いていきたいと思います。
前提条件
VSCode, Nodeのインストールに関して、この記事では説明しません。 有名なので、検索すれば多くの記事がたくさんわんさか出てくることでしょう。
Let's 作業
全体の流れ
今回の方法ではasideを用います。 aside君により、堅牢かつスケーラブルな開発環境を高速に作成することができます。詳しくは 2.の項目で解説します。
1. GoogleAppsScriptAPIの有効化
まず、外部からAppsScriptを操作するために、GoogleAppsScriptAPIを有効化します。 GoogleAppsScriptAPIの設定画面 上記のリンクから設定画面に飛び、APIを有効化しましょう。
2. asideを用いたプロジェクト作成
asideとは2023年3月にリリースされた、手軽にGAS環境を構築するためのパッケージです。
執筆時点で、最も一般的なGASの環境構築方法は、claspで一から環境を構築していき、自らの手で様々なカスタマイズを行っていく方法です。claspでシンプルな環境を構築するだけならばそこまで難しくはありませんが、様々なカスタマイズを行っていくとなると、 結構作業が面倒になってきます。
そこで、aside君が登場します！ aside君はコマンド一つで快適なコーディング環境を作成してくれるのです！！
一応、aside君が作ってくれる環境の特徴を書き出しておきます。
- claspの設定がなされている
- 快適にTypescriptで記述できるような環境である (デプロイ時には自動コンパイルされる)
- ESLint,Prettierの設定がなされている
- Jestによるテスト環境が整っている
- 開発環境と本番環境を簡単に切り替えができる設定がなされている
というわけで、aside君を使って環境構築をしていきましょう。
まずは、プロジェクトを入れるディレクトリを作成しましょう。 今回はgas_sampleという名前にしました。
次に、作成したディレクトリをVSCodeで開きます。
ここで、aside君を呼び出します。 下記のコマンドを打つとaside君からどう設定するかを聞かれるので答えていきましょう。 結構インストールに時間がかかりますが、aside君が頑張っている証なので、根気よく待っててあげてね！ 設定を進めていくと、ScriptID, ScriptID for production environment の入力を求められますが、未入力のままEnterを押して問題ありません。
# プロジェクト作成 $ npx @google/aside init
3. プロジェクトの細かな設定
タイムゾーンの変更
必要に応じてタイムゾーンを変更しましょう。
- "timeZone": "America/New_York", + "timeZone": "Asia/Tokyo",
ライセンス設定の変更
初期状態では、至る所にライセンス情報が記述される設定になっており、コーディングの邪魔になるので、ライセンス情報が記載されないように設定を変更しましょう。
{
"ignore": [
…
"build",
+ "src",
+ "test",
"dist"
],
…
}
ほとんどの方は上記の設定でよいと思いますが、 aside君で作ったプロジェクト自体をgithubなどで公開したり、皆に自分の作ったプロジェクトを配りたい方は、上記の設定はしないでおきましょう。 下記のように自分の名前に変更しましょう。 代わりに、著作権情報を変更する必要があります。 （ややこしい話なのですが、asideによってデプロイされたGASのコードにはライセンスは適用されないので、ライセンス情報の記述なしで配って大丈夫です。）
- Copyright 2023 Google LLC + Copyright 2023 [自分の名前など]
余談ですが、ライセンスについて気になる人は、地味に大事かもしれない留意点を見てみてください。
ここまで出来たら一旦コミットしておきましょう。
4. デプロイ
開発環境と本番環境用にコマンドが用意されています。 ですが、プロジェクトを作成した時点では開発環境も本番環境も同じ設定になっています。 切り替えが必要なようでしたら、clasp-dev.jsonとclasp-prod.jsonの内容を変更してください。
# 開発環境にデプロイ $ npm run deploy # 本番環境にデプロイ $ npm run deploy:prod
デプロイが完了したら、下記のページでプロジェクトを確認しましょう。 AppsScriptのプロジェクトページ 無事にプロジェクトが作成されていればOKです。 ブラウザにお気に入り登録しておくと使いやすいでしょう。
これでプロジェクトの作成は完了です。 おつかっっっっっっっっっさまです！！！
あれ？そんなに大変じゃなかったですか？ それならよかったです。aside君のおかげですね。
まとめ
これだけ簡単にリッチな開発環境を整えられるのは嬉しいですね。 この記事によってレガシーコードが一つでも減ることを願っています。 ぜひ友達にもaside君を教えてあげてください。
おまけ
地味に大事かもしれない留意点
覚えておくと、私のような体験をしなくて済むかもしれません。
- 既にプロジェクトページ上にあるプロジェクトと名前が被らないように注意しましょう。aside君が上手く動いてくれません。
- プロジェクトの初期状態はスタンドアロンかと思いきや、スプレッドシートがバインドされています。気をつけましょう。
- 少し難しい話になります。asideは Apache License 2.0 というライセンスが付与されています。このライセンスについて簡単に説明すると、「自由に使っていいけれど、再配布する時だけはライセンス情報を記述してね。」というものです。つまり、aside君を使って作ったプロジェクト自体を配布する時は、ライセンス情報を記述する必要があります。が、しかし、完全にaside君とは関係なく動くことのできる、コンパイルされた後のコードにはApacheライセンスは適用されません(成果物にも派生成果物にも当たらないです)。ライセンスの記述も不要です。license-config.jsonのignoreのリストにdistが含まれていることからも明らかです。というわけで、aside君を使って作ったGASのコードを配布するのにもライセンス情報は必要ありません。
便利なコマンド
package.jsonのscriptsを見れば書いてありますが、一応紹介しておきます。
静的解析(Linter)
静的解析は下記のコマンドで実行できます。 静的解析ができることの喜びを噛み締めましょう。
$ npm run lint
テスト
テストは下記のコマンドで実行できます。 コード本体は書かなくてもテストは書きましょう。
$ npm run test
参考URL
アノテーション株式会社
アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。
